<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="svg.min.js"></script>
  <script>

    // 如果要放到前面，就得等load完毕。
    SVG.on(document, 'DOMContentLoaded', function() {
        // var draw = SVG('drawing')
        
    })




  </script>
</head>
<body>
  <div id="drawing" style="background:lightgreen"></div>
</body>
</html>


<script>

if ( !  SVG.supported) {  
  alert('SVG not supported');
}

var gdraw = SVG('drawing').size(500, 500);                    // 创建一个 SVG.Doc 



var grect = gdraw.rect(100, 100).attr({ fill: '#f06' })     //


//var draw = SVG('drawing').size('100%', '100%')  // case #drawing:
// http://www.114la.com/other/rgb.htm   颜色表

grect.move(75, 75).fill('#AB82FF') //原来的rect移动到那里，改变颜色。
gdraw.rect(100, 100).move(100, 50).fill('#f08')  // 新建一个rect。后加的在上面。



var gPurpleRect = gdraw.rect(100, 100).move(125, 120).fill('#8A2BE2')  // 新建一个紫色rect。后加的在上面。



  var dhobject = Object;

  var dhnewobject = new Object()

  var dhfunction = function(){}

  function dhdeffunction () {}

  var dhprotoObject = Object.__proto__

  var dhprotosprotoObject = Object.__proto__.__proto__

  var dhfunctionsproto = dhfunction.__proto__

  var dhfunctionsprotoproto = dhfunction.__proto__.__proto__

  var dhdeffunctionsproto = dhdeffunction.__proto__

  var dhdeffunctionsprotosproto = dhdeffunction.__proto__.__proto__
    
  
 gPurpleRect.click(function() {
  console.log(dhobject, dhnewobject);
}) 



var symbol = gdraw.symbol()
symbol.rect(100, 100).fill('#EEEE00')   // 并没有在画布上出现。

var use  = gdraw.use(symbol).move(200, 200)  // 出现。
var use2  = gdraw.use(symbol).move(220, 220)  // 出现。

use.linkTo('http://www.so.com/')  // 超级连接。如果use2没定义LinkTo，则能够穿透use2.
use2.linkTo('http://www.baidu.com/')  // 定义了，就覆盖了use的一部分。




/*

learning : 
 http://svgjs.com/getting-started/

            > SVG.Shape > rect...
SVG.Element > SVG.Parent > SVG.Container > SVG.Doc
                                         > SVG.Nested
==SVG.Element== 所有的svg对象基类。

==SVG.Parent== 继承自element. 
class is the base wrapper for all elements that can contain other elements. SVG.Parent inherits directly from the lowest level of all SVG.js classes: SVG.Element.
 
==SVG.Container== 继承自Parent.这里可以客户实现定制方法。
adds another level to the parent inheritance stack. Where SVG.Parent brings some low level methods like add(), remove() and has() to name a few, 
SVG.Container can and should be used if you want to add your own methods. That way the SVG.Parent prototype remains clean. 
Therefore you should always inherit from SVG.Container when implementing your own parent elements.

==SVG.Doc== 继承自SVG.Container. 主要的SVG.js初始化功能。 在指定元素下面创建一个svg根节点， 返回SVG.Doc的一个实例。 作为最顶层的容器对象。
var draw = SVG('drawing')
Note: The first time SVG() is called, a second, invisible <svg> will be created.
注意，第一次SVG函数调用时，会多创建一个隐形的<svg>，用来辅助svg.js运作。主要因为直接操作用户对象，会产生一些副作用。不管调用多少次SVG函数，只会有一个辅助svg对象被创建。
 
==SVG.Nested== 继承自SVG.Container。由SVG.Container.nested()构造。和svg.doc功能相同。
var nested = draw.nested()
var rect = nested.rect(200, 200)
 
==SVG.G== 继承自SVG.Container。组合一堆元素。自身没有几何属性（x,y,width,height），如果要用，用nested代替。
var group = draw.group()
group.path('M10,20L30,40')
已有的对象可以加入。group.add(rect)

==SVG.Symbol== 继承自SVG.Container。
和group的区别是，symbo并不渲染，可以理解为一个设计稿。用use可以进行施工，产生具体的对象。
var symbol = gdraw.symbol()
symbol.rect(100, 100).fill('#EEEE00')   // 并没有在画布上出现。
var use  = gdraw.use(symbol).move(200, 200)  // 出现。
var use2  = gdraw.use(symbol).move(220, 220)  // 第二个出现。

==SVG.Defs== 继承自SVG.Container。
定义？和group差不多。原料库。
var defs = draw.defs()
var defs = rect.doc().defs()

==SVG.A== 继承自SVG.Container。
var link = draw.link('http://svgdotjs.github.io/')  // 创建一个超链接到所有的子元素。
var rect = link.rect(100, 100)

link.to('http://apple.com')   // 更新。
进一步, the link element has a show() method to create the xlink:show attribute:link.show('replace')

And the target() method to create the target attribute:
link.target('_blank')

Elements can also be linked the other way around with the linkTo() method:
rect.linkTo('http://svgdotjs.github.io/')

rect.linkTo(function(link) {
  link.to('http://svgdotjs.github.io/').target('_blank')
})

XLink定义了一个文档如何链接到另一个文档。
xlink:show用于定义目标内容如何显示给用户，其取值可以是：
　　new：目标内容以一个单独的上下文显示（在浏览器中，可能是一个新的浏览器窗口）。
　　replace：目标内容应当取代原始上下文中的内容（在浏览其中这是通常的链接行为）。
　　embed：这个内容嵌入到文档中的链接位置（代替链接表示本身）。
　　other：这个链接没有指定被访问的行为。如果是这个值时，那么这个文档就会包含有关这个链接的其他提示，例如其他描述这个链接目的的标记（文档的专用类型）。
　　 none：这个链接没有指定被访问的行为。这是，这个文档不会包含有关如何访问这个链接的其他提示。



==SVG.invent()==
创造一个新的对象。
SVG.Rounded = SVG.invent({  
  create: 'rect'   // 原型  
, inherit: SVG.Shape   // 继承谁的方法
, extend: {            //  扩展    
    size: function(width, height) { // Create method to 比例的缩放 the rounded corners
      return this.attr({
        width:  width
      , height: height
      , rx:     height / 5      
      , ry:     height / 5
      })
    }
  }  
, construct: {    
    rounded: function(width, height) {
      return this.put(new SVG.Rounded).size(width, height)
    }

  }
});
var rounded = draw.rounded(200, 100)


SVG.Shape = SVG.invent({
  create: function(element) {
    this.constructor.call(this, element)
  }
, inherit: SVG.Element
})


--继承自shape的对象：
SVG.Rect、SVG.Circle、SVG.Ellipse、SVG.Line、SVG.Polyline、SVG.Polygon、SVG.Path、
SVG.Text、SVG.Tspan、SVG.Image、SVG.Use

SVG.TextPath   继承自 SVG.Text

--继承自SVG.Element
SVG.Stop、SVG.Bare   

--继承自SVG.Container
SVG.Gradient、 SVG.Pattern、SVG.Mask、SVG.ClipPath、SVG.Marker    
  


Every element instance within SVG.js has a reference to the actual node.

grect.node  === SVGElement
<rect id="SvgjsRect1008" width="100" height="100" fill="#ab82ff" x="75" y="75"></rect>

grect.__proto__                   create
grect.node.__proto__                                                     SVGRectElement 
grect.node.__proto__.__proto__                                           SVGGeometryElement
grect.node.__proto__.__proto__.__proto__                                 SVGGraphicsElement
grect.node.__proto__.__proto__.__proto__.__proto__                       SVGElement
grect.node.__proto__.__proto__.__proto__.__proto__.__proto__             Element 
grect.node.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__                      Node 
grect.node.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__            EventTarget 
grect.node.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__  Object {}




+
Parents
SVG.Doc
SVG.Nested
SVG.G
SVG.Symbol
SVG.Defs
SVG.A
+
Elements
SVG.Rect
SVG.Circle
SVG.Ellipse
SVG.Line
SVG.Polyline
SVG.Polygon
SVG.Path
SVG.Text
SVG.TextPath
SVG.Tspan
SVG.Image
SVG.Gradient
SVG.Stop
SVG.Pattern
SVG.Mask
SVG.ClipPath
SVG.Use
SVG.Marker
SVG.Bare
+
Referencing
By id
Using CSS selectors
Existing DOM elements
Using jQuery or Zepto
Circular reference
Child references
Parent references
URI references
+
Manipulating
Attributes
Positioning
Resizing
Syntactic sugar
Transforming
Styles
Classes
Data
Memory
Document Tree
Arranging
Geometry
+
Boxes
SVG.Box
SVG.ViewBox
SVG.BBox
SVG.RBox
+
Animating
Animate
Controlling
Timing
Callbacks
+
Events
Basic events
Event listeners
Custom events
+
Classes
SVG.Array
SVG.PointArray
SVG.PathArray
SVG.Color
SVG.Matrix
SVG.Number
SVG.Set
SVG.Point
Importing / Exporting
+
Extending
SVG.invent
SVG.extend
Tutorials / Examples
+
Plugins
svg.colorat.js
svg.connectable.js
svg.easing.js
svg.draw.js
svg.draggable.js
svg.filter.js
svg.foreignobject.js
svg.intersections.js
svg.math.js
svg.path.js
svg.pathmorphing.js
svg.resize.js
svg.screenbbox.js
svg.select.js
svg.shapes.js
svg.textmorph.js
svg.topath.js
svg.topoly.js
svg.panzoom.js
svg.declartive.js
+
Contributing
Coding Style
Documentation
Compatibility
+
FAQ
Two SVG's are generated when I initialize SVG.js. Is that a bug?
Can SVG.js run on Node.js?
How can I modify an element that already exists in the dom?
I need help getting something to work...
I found a bug. Where do I report it?
Where can I find tutorials?
How do I contribute or fix something in the docs?
Acknowledgements & Thanks



 
 
 
 
 
 
*/ 
 
</script>